<html>
<head><title>Options :: Revolver - Tabs</title></head>
<script type="text/javascript">
var bg = chrome.extension.getBackgroundPage();
// Saves options to localStorage.
function save_options() {
	localStorage["seconds"] = document.getElementById("seconds").value;
	bg.timeDelay = (document.getElementById("seconds").value*1000);
	if (document.getElementById("reload").checked == true) {
		localStorage["reload"] = 'true';
		bg.tabReload = true;
	} else {
		localStorage["reload"] = 'false';
		bg.tabReload = false;
	}
	if (document.getElementById("inactive").checked == true) {
		localStorage["inactive"] = 'true';
		bg.tabInactive = true;
	} else {
		localStorage["inactive"] = 'false';
		bg.tabInactive = false;
	}
  // Update status to let user know options were saved.
  var status = document.getElementById("status");
  status.innerHTML = "Options Saved.";
  setTimeout(function() {
    status.innerHTML = "";
  }, 750);
}
// Restores saved values from localStorage.
function restore_options() {
	if (localStorage["seconds"]) {
		document.getElementById("seconds").value = localStorage["seconds"];
	} else {
		document.getElementById("seconds").value = "10";
	}
	if (localStorage["reload"]) {
		if (localStorage["reload"] == 'true') {
			document.getElementById("reload").checked = true;
		} else {
			document.getElementById("reload").checked = false;
		}
	} else {
		document.getElementById("reload").checked = true;
	}
	if (localStorage["inactive"]) {
		if (localStorage["inactive"] == 'true') {
			document.getElementById("inactive").checked = true;
		} else {
			document.getElementById("inactive").checked = false;
		}
	} else {
		document.getElementById("inactive").checked = true;
	}
}
</script>
<style type="text/css">
div#topline {background-image:url('revolver_t_48.png');background-repeat: no-repeat;padding:0 5px 5px 55px;border-bottom:1px dotted #999;}
h1 {margin:0;padding:0;}
span.byline {font-size:.7em;color:#999;}
span.byline a {color:#777;}
input {font-size:.8em;border:1px solid #ccc;padding:3px;}
label {font-size:.8em;}
span.example {font-size:.7em;color:#999;display:block;}
div#settings {margin-left:7px;}
div#settings p {border-bottom: 1px dotted #ccc;padding-bottom:3px;}
div#status {color:#ff0000;margin-top:5px;}
</style>
<body onload="restore_options()">
<div id="topline">
<h1>Revolver - Tabs</h1>
<span class="byline">by <a href="http://www.buildcontext.com/">Ben Hedrington</a> Twitter: <a href="http://twitter.com/benhedrington">@benhedrington</a></span>
</div>
<div id="settings">
<p><label for="seconds">Seconds:</label> <input type="text" name="seconds" id="seconds" style="width:30px;"><span class="example">The number of seconds to show a tab before switching ex. <strong>10</strong></span></p>
<p><label for="reload">Reload:</label> <input type="checkbox" name="reload" id="reload"><span class="example">Check this box to reload the tab each time it is shown.</span></p>
<p><label for="inactive">Rotate only when inactive:</label> <input type="checkbox" name="inactive" id="inactive"><span class="example"><strong>Rotation will pause</strong> if the browser has been interacted with within 15 seconds. [Thanks Fred!]</span></p>
<button onclick="save_options()">Save</button>
<div id="status"></div>
</div>
</body>
</html>
